<template>
  <div>
    <doc-box v-for="(item, idx) in list" :key="idx" :title="item.title">
      <div slot="preview">
        <template v-if="typeof item.code === 'string'">
          <div v-html="item.code" :class="item.class"></div>
        </template>

        <template v-else>
          <div v-for="(txt, ti) in item.code" :class="item.class" :key="ti" v-html="txt"></div>
        </template>
      </div>

      <template slot="code">
        <template v-if="typeof item.code === 'string'">
          <code>{{ item.code }}</code>
        </template>

        <template v-else>
          <div>
            <code v-for="(txt, ti) in item.code" :key="ti">{{ txt }}</code>
          </div>
        </template>
      </template>
    </doc-box>
  </div>
</template>

<script>
import DocBox from '../components/DocBox'
export default {
  name: 'form',
  components: {DocBox},
  data () {
    return {
      list: [
        {
          title: '表单',
          code: [
            `<k-form>
<k-form-item>
<el-input></el-input>
</k-form-item>
</k-form>`
          ]
        }
      ]
    }
  }
}
</script>

<style scoped>

</style>
